import 'package:flutter/material.dart';
import 'package:flutterdemo/utils/toast_util.dart';

import 'multi_child_widget.dart';

class LayoutWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("layout"),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Flex(
              direction: Axis.horizontal,
              children: <Widget>[
                Expanded(
                  child: Container(
                    height: 50,
                    color: Colors.blue,
                    alignment: AlignmentDirectional.center,
                    child: Text("权重:1"),
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Container(
                    height: 60,
                    color: Colors.yellow,
                    alignment: AlignmentDirectional.bottomCenter,
                    child: Text("权重:2"),
                  ),
                  flex: 2,
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minHeight: 50, minWidth: double.infinity, //宽度尽可能大
                ),
                child: Container(
                  color: Colors.blue,
                  alignment: AlignmentDirectional.center,
                  child: Text("ConstrainedBox,约束"),
                ),
              ),
            ),
            Container(
              color: Colors.greenAccent,
              child: Wrap(
                spacing: 8.0, //主轴(水平)方向间距
                runSpacing: 4.0, //纵轴（垂直）方向间距
                alignment: WrapAlignment.start,
                children: <Widget>[
                  Text("流式布局"),
                  RaisedButton(
                    onPressed: null,
                    child: Text("测试1"),
                  ),
                  RaisedButton(
                    onPressed: null,
                    child: Text("测试2"),
                  ),
                  Chip(
                    label: Text("chip1"),
                    onDeleted: () {
                      ToastUtil.showToastCenter('chip1');
                    },
                  ),
                  Chip(
                    label: Text("chip2"),
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text("A"),
                    ),
                  ),
                  Chip(
                    label: Text("chip2"),
                    avatar: CircleAvatar(
                      backgroundColor: Colors.blue,
                      child: Text("B"),
                    ),
                  ),
                ],
              ),
            ),
            //堆叠布局
            Stack(
              alignment: AlignmentDirectional.centerStart,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.all(5),
                  width: double.maxFinite,
                  height: 60,
                  alignment: Alignment.center,
                  color: Colors.redAccent,
                  child: Text(
                    "data",
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22,
                    ),
                  ),
                ),
                Center(
                  child: Text('居中的'),
                ),
                Positioned(
                  left: 5,
                  bottom: 1,
                  child: Text("绝对定位"),
                ),
                Positioned(
                  right: 5,
                  top: 2,
                  child: Text("绝对定位"),
                ),
              ],
            ),
            Container(
              color: Colors.black12,
              width: double.infinity,
              height: 60,
              constraints: BoxConstraints.expand(
                height: 232,
              ),
//              decoration: BoxDecoration(
//                color: Colors.white,
//                image: DecorationImage(
//                  image: AssetImage(
//                    ImgUtil.getImgPath("img_screen"),
//                  ),
//                  fit: BoxFit.cover,
//                ),
//              ),
              child: Column(
                children: <Widget>[
                  Align(
                    child: Text("Align相对定位"),
                    alignment: Alignment.topLeft,
                  ),
                  Align(
                    child: Text("Align相对定位"),
                    alignment: Alignment.topCenter,
                  ),
                  Align(
                    child: Text("Align相对定位"),
                    alignment: Alignment.bottomRight,
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: 10),
              child: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.purpleAccent,
                  borderRadius: BorderRadius.circular(5), //圆角
                  boxShadow: [
                    //阴影
                    BoxShadow(
                        color: Colors.greenAccent,
                        offset: Offset(5.0, 5.0), //平移
                        blurRadius: 3),
                  ],
                  gradient: //渐变
                      LinearGradient(
                          colors: [Colors.redAccent, Colors.yellowAccent]),
                ),
                child: Center(
                  child: Text("DecoratedBox"),
                  heightFactor: 2, //高倍数
                  widthFactor: 1.5, //宽倍数
                ),
              ),
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 10, left: 5),
                    alignment: Alignment.center,
                    child: Text("exlpain"),
                    height: 45,
                    color: Colors.red,
                  ),
                  flex: 1,
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 10, left: 5),
                    alignment: Alignment.center,
                    child: Text("content"),
                    height: 45,
                    color: Colors.red,
                  ),
                  flex: 2,
                ),
              ],
            ),
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 10, left: 5),
                  alignment: Alignment.center,
                  child: Text("exlpain"),
                  height: 45,
                  color: Colors.red,
                ),
                Expanded(
                  child: Container(
                    margin: EdgeInsets.only(top: 10, left: 5),
                    alignment: Alignment.center,
                    child: Text("exlpain"),
                    height: 45,
                    color: Colors.red,
                  ),
                  flex: 1,
                ),
                Container(
                  margin: EdgeInsets.only(top: 10, left: 5),
                  alignment: Alignment.center,
                  child: Text("content"),
                  height: 45,
                  color: Colors.red,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  constraints: BoxConstraints(
                    minWidth: 70,
                  ),
                  alignment: Alignment.center,
                  color: Colors.green,
                  height: 40,
                  child: Text("居左"),
                ),
                Container(
                  color: Colors.yellow,
                  height: 45,
                  child: Text("居中"),
                ),
                Container(
                  color: Colors.yellow,
                  height: 45,
                  child: Text("居右"),
                ),
              ],
            ),
            Container(
              margin: EdgeInsets.all(5),
              alignment: Alignment.center,
              constraints: BoxConstraints(
                minHeight: 50,
              ),
              color: Colors.lightGreenAccent,
              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Text("左对齐"),
                  ),
                  Align(
                    alignment: Alignment.centerRight,
                    child: Text("右对齐"),
                  ),
                  Positioned(
                    right: 50,
                    top: 1,
                    child: Text("10"),
                  ),
                ],
              ),
            ),
            Container(
              width: 200.0,
              height: 100.0,
              color: Colors.yellow,
              child: CustomMultiChildLayout(
                delegate: TestLayoutDelegate(),
                children: <Widget>[
                  LayoutId(
                    id: TestLayoutDelegate.title,
                    child: new Text("CustomMultiChildLayout",
                        style: TextStyle(fontSize: 20.0, color: Colors.black)),
                  ),
                  LayoutId(
                    id: TestLayoutDelegate.description,
                    child: new Text("This is description",
                        style: TextStyle(fontSize: 14.0, color: Colors.red)),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
